<!--
 * @Autor: Ruohong Yu
 * @Date: 2022-09-05 22:23:28
 * @Description: file content
 * @FilePath: \ebook\src\components\ebook\EbookSlideContents.vue
-->
<template>
  <div class="ebook-slide-contents">
    <div class="slide-contents-search-wrapper">
      <div class="slide-contents-search-input-wrapper">
        <div class="slide-contents-search-icon">
          <span class="icon-search"></span>
        </div>
        <input type="text"
               v-model="searchText"
               :placeholder="$t('book.searchHint')"
               class="slide-contents-search-input"
               @click="showSearchPage()"
               @keyup.enter.exact="search()">
      </div>
      <div class="slide-contents-search-cancel"
           v-if="searchVisible"
           @click="hideSearchPage()">{{$t('book.cancel')}}
      </div>
    </div>
    <div class="slide-contents-book-wrapper" v-show="!searchVisible">
      <div class="slide-contents-book-img-wrapper">
        <img :src="cover" alt="" class="slide-contents-book-img">
      </div>
      <div class="slide-contents-book-info-wrapper">
        <div class="slide-contents-book-title">
          <span class="slide-contents-book-title-text">{{metadata.title}}</span>
        </div>
        <div class="slide-contents-book-author">
          <span class="slide-contents-book-author-text">{{metadata.creator}}</span>
          </div>
      </div>
      <div class="slide-contents-book-progress-wrapper">
        <div class="slide-contents-book-progress">
          <span class="progress">{{progress + '%'}}</span>
          <span class="progress-text">{{$t('book.haveRead2')}}</span>
        </div>
        <div class="slide-contents-book-time">{{getReadTimeText()}}</div>
      </div>
    </div>
    <scroll class="slide-contents-list" v-show="!searchVisible" :top="150" :bottom="48" ref="scroll">
      <div class="slide-contents-item" v-for="(item,index) in navigation" :key="index">
        <span class="slide-contents-item-label" @click="displayContent(item.href)" :class="{'selected':section===index}" :style="contentItemStyle(item)">{{item.label}}</span>
        <span class="slide-contents-item-page"></span>
      </div>
    </scroll>
    <scroll class="slide-search-list" v-show="searchVisible" :top="60" :bottom="48">
      <div class="slide-search-item" @click="displayContent(item.cfi,true)" v-for="(item,index) in searchList" :key="index" v-html="item.excerpt">
      </div>
    </scroll>

  </div>
</template>

<script>
import { ebookMixin } from '../../utils/mixin'
import Scroll from '../common/Scroll.vue'
import { px2rem } from '../../utils/utils'

export default {
  mixins: [ebookMixin],
  components: {
    Scroll
  },
  data () {
    return {
      searchVisible: false,
      searchList: [],
      searchText: ''
    }
  },
  methods: {
    doSearch (q) {
      return Promise.all(
        this.currentBook.spine.spineItems.map(
          item => item.load(this.currentBook.load.bind(this.currentBook))
            .then(item.find.bind(item, q))
            .finally(item.unload.bind(item)))
      ).then(results => Promise.resolve([].concat.apply([], results)))
    },
    search () {
      this.doSearch(this.searchText).then(result => {
        this.searchList = result.map(item => {
          item.excerpt = item.excerpt.replace(this.searchText, `<span class="content-search-text">${this.searchText}</span>`)
          return item
        })
      })
    },
    showSearchPage () {
      this.searchVisible = true
    },
    hideSearchPage () {
      this.searchVisible = false
      this.searchText = ''
      this.searchList = null
    },
    contentItemStyle (item) {
      return {
        marginLeft: `${px2rem(item.level * 15)}rem`
      }
    },
    displayContent (target, highlight = false) {
      this.display(target, () => {
        this.hideTitleAndMenu()
        if (highlight) {
          this.currentBook.rendition.annotations.highlight(target)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.ebook-slide-contents{
  width: 100%;
  font-size: 0;
  .slide-contents-search-wrapper{
    display: flex;
    width: 100%;
    height: px2rem(30);
    margin: px2rem(20) 0 px2rem(10) 0;
    padding: 0 px2rem(15);
    box-sizing: border-box;
    .slide-contents-search-input-wrapper{
      flex: 1;
      @include center;
      .slide-contents-search-icon{
        flex: 0 0 px2rem(28);
        font-size: px2rem(14);
        @include center;
      }
      .slide-contents-search-input{
        flex: 1;
        width: 100%;
        height: px2rem(30);
        font-size: px2rem(14);
        background: transparent;
        border: 0;
        &:focus{
          outline: none;
        }
      }
    }
    .slide-contents-search-cancel{
      flex: 0 0 px2rem(50);
      font-size: px2rem(14);
      @include right;
    }
  }
  .slide-contents-book-wrapper{
    display: flex;
    width: 100%;
    height: px2rem(90);
    padding: px2rem(10) px2rem(15) px2rem(20) px2rem(15);
    box-sizing: border-box;
    .slide-contents-book-img-wrapper{
      flex: 0 0 px2rem(45);
      .slide-contents-book-img{
        width: px2rem(45);
        height: px2rem(60);
      }
    }
    .slide-contents-book-info-wrapper{
      flex: 1;
      padding:0 px2rem(10);
      box-sizing: border-box;
      .slide-contents-book-title{
        //width: px2rem(163.75);
        line-height: px2rem(16);
        font-size: px2rem(14);
        @include left;
        .slide-contents-book-title-text{
          @include ellipsis2(3);
        }
      }
      .slide-contents-book-author{
        //width: px2rem(163.75);
        font-size: px2rem(12);
        line-height: px2rem(14);
        margin-top: px2rem(5);
        @include left;
        .slide-contents-book-author-text{
          @include ellipsis2(1);
        }
      }
    }
    .slide-contents-book-progress-wrapper{
      flex: 0 0 px2rem(60);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      .slide-contents-book-progress{
        .progress{
          font-size: px2rem(12);
        }
        .progress-text{
          font-size: px2rem(10);
        }
      }
      .slide-contents-book-time{
        margin-top: px2rem(5);
        font-size: px2rem(10);
      }
    }
  }
  .slide-contents-list{
    padding: 0 px2rem(15);
    box-sizing: border-box;
    .slide-contents-item{
      display: flex;
      padding: px2rem(14) 0;
      box-sizing: border-box;
      .slide-contents-item-label{
        flex: 1;
        font-size: px2rem(13);
        line-height: px2rem(16);
        @include ellipsis;
      }
    }
  }
  .slide-search-list{
    width: 100%;
    padding: 0 px2rem(15);
    box-sizing: border-box;
    .slide-search-item{
      font-size: px2rem(14);
      line-height: px2rem(16);
      padding: px2rem(14) 0;
      box-sizing: border-box;
    }
  }
}

</style>
